import { h, ref, watch, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import {
  COLUMN_WIDTH_CONFIG,
  calculateTableWidth,
  DefaultTableWidth
} from '@/common/column-width-config'
import { InternalRowData, TableColumns } from '@/common/types'

export function useColumns() {
  const t = window.$t

  const fieldColumnsRef = ref({
    fieldColumns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })
  const indexColumnsRef = ref({
    indexColumns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })

  const createColumns = () => {
    const fieldColumns = [
      {
        title: '#',
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('dataManage.columnName'),
        key: 'columnName',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.dataType'),
        key: 'dataType',
        width: 80
      },
      {
        title: t('dataManage.args'),
        key: 'args',
        width: 60
      },
      {
        title: t('dataManage.comment'),
        key: 'columnComment',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.isNotNull'),
        key: 'isNotNull',
        width: 80,
        render: (rowData: any, unused: number) =>
          h('div', null, rowData.isNotNull ? t('common.yes') : t('common.no'))
      },
      {
        title: t('dataManage.defVal'),
        key: 'defVal',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.isPrimkey'),
        key: 'isPrimkey',
        width: 80,
        render: (rowData: any, unused: number) =>
          h('div', null, rowData.isPrimkey ? t('common.yes') : t('common.no'))
      },
      {
        title: t('dataManage.isPartition'),
        key: 'isPartition',
        width: 80,
        render: (rowData: any, unused: number) =>
          h('div', null, rowData.isPartition ? t('common.yes') : t('common.no'))
      },
      {
        title: t('dataManage.previewData'),
        key: 'previewData',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h('span', null, rowData.previewData)
      }
    ] as TableColumns

    fieldColumnsRef.value = {
      fieldColumns,
      tableWidth: calculateTableWidth(fieldColumns)
    }

    const indexColumns = [
      {
        title: '#',
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('dataManage.indexName'),
        key: 'indexName',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.columns'),
        key: 'columns',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.isUnique'),
        key: 'isUnique',
        ...COLUMN_WIDTH_CONFIG['name'],
        render: (rowData: any, unused: number) =>
          h('div', null, rowData.isUnique ? t('common.yes') : t('common.no'))
      }
    ] as TableColumns

    indexColumnsRef.value = {
      indexColumns,
      tableWidth: calculateTableWidth(indexColumns)
    }
  }

  onMounted(() => {
    createColumns()
  })

  watch(useI18n().locale, () => {
    createColumns()
  })

  return {
    fieldColumnsRef,
    indexColumnsRef,
    createColumns
  }
}
